<div class="block-content upper-index no-padding">
<h1>Gallery</h1>
	
<div class="block-controls">
	<ul class="controls-buttons">
		<li><b>Required files:</b><br>
		common.css, gallery.css</li>
		<li class="sep"></li>
		<li><b>Available in:</b><br>
		standard + mobile</li>
	</ul>
</div>
</div>

<div class="block-content no-title">
<h2>Image gallery</h2>

<pre class="brush: html">
&lt;!-- The class lite-grey-gradient is optional: it adds a background to the element --&gt;
&lt;ul class="gallery with-padding lite-grey-gradient"&gt;
	&lt;li&gt;&lt;a href="images/demo/files/file1-medium.jpg"&gt;&lt;img src="images/demo/files/file1-mini.png" width="64" height="45"&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="images/demo/files/file2-medium.jpg"&gt;&lt;img src="images/demo/files/file2-mini.png" width="64" height="36"&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="images/demo/files/file3-medium.jpg"&gt;&lt;img src="images/demo/files/file3-mini.png" width="64" height="43"&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="images/demo/files/file4-medium.jpg"&gt;&lt;img src="images/demo/files/file4-mini.png" width="64" height="45"&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="images/demo/files/file5-medium.jpg"&gt;&lt;img src="images/demo/files/file5-mini.png" width="64" height="50"&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="images/demo/files/file6-medium.jpg"&gt;&lt;img src="images/demo/files/file6-mini.png" width="64" height="48"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

<ul class="gallery with-padding lite-grey-gradient">
	<li><a href="images/demo/files/file1-medium.jpg"><img src="images/demo/files/file1-mini.png" width="64" height="45"></a></li>
	<li><a href="images/demo/files/file2-medium.jpg"><img src="images/demo/files/file2-mini.png" width="64" height="36"></a></li>
	<li><a href="images/demo/files/file3-medium.jpg"><img src="images/demo/files/file3-mini.png" width="64" height="43"></a></li>
	<li><a href="images/demo/files/file4-medium.jpg"><img src="images/demo/files/file4-mini.png" width="64" height="45"></a></li>
	<li><a href="images/demo/files/file5-medium.jpg"><img src="images/demo/files/file5-mini.png" width="64" height="50"></a></li>
	<li><a href="images/demo/files/file6-medium.jpg"><img src="images/demo/files/file6-mini.png" width="64" height="48"></a></li>
</ul>
</div>

<div class="block-content no-title">
<h2>Image preview</h2>

<pre class="brush: html">
&lt;!-- The class no-margin is for removing the block-content side padding --&gt;
&lt;div class="gallery-preview no-margin"&gt;
	
	&lt;!-- Previous button --&gt;
	&lt;a href="#" class="prev"&gt;&lt;img src="images/icons/fugue/navigation-180.png" width="16" height="16"&gt;&lt;/a&gt;
	
	&lt;!-- Next button --&gt;
	&lt;a href="#" class="next"&gt;&lt;img src="images/icons/fugue/navigation.png" width="16" height="16"&gt;&lt;/a&gt;
	
	&lt;!-- Image - the link is optional --&gt;
	&lt;a href="#"&gt;&lt;img src="images/demo/files/file1-medium.jpg" width="400" height="281"&gt;&lt;/a&gt;
	
&lt;/div&gt;
</pre>

<div class="gallery-preview no-margin">
	<a href="javascript:void(0)" class="prev"><img src="images/icons/fugue/navigation-180.png" width="16" height="16"></a>
	<a href="javascript:void(0)" class="next"><img src="images/icons/fugue/navigation.png" width="16" height="16"></a>
	<a href="javascript:void(0)"><img src="images/demo/files/file1-medium.jpg" width="400" height="281"></a>
</div>
</div>